
const HtmlWebpackPlugin = require("html-webpack-plugin")

// vue文件的加载，，还用到一个插件
// const VueLoaderPlugin = require("vue-loader/lib/plugin")
const {VueLoaderPlugin} = require("vue-loader")

const path = require("path");
module.exports={
    mode:"development",
    devtool: "source-map",
    entry: "./src/index.js",
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:"bundle.js",
        publicPath:"/"

    },
    module:{
        rules:[
            {
                test:/\.jsx?$/i,
                exclude:/node_modules/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets: [
                            ["@babel/preset-env"],
                            ["@babel/preset-react"]]
                    }
                }
            },
            {
                test:/\.css$/i,
                use:["style-loader","css-loader"]
            },
            {
                test: /\.vue$/i,
                use:["vue-loader"]
            }
        ]
    },
    resolve:{
        extensions:[".jsx",".js",".vue"],
        mainFiles:["index","main"],
        alias:{
            "@":path.resolve(__dirname,"./src")
        }
    },
    devServer:{
        static:["public",{
            directory: path.resolve(__dirname,"./abc"),
            watch:true
        }],// 静态文件的位置

        host:"0.0.0.0",// ，局域网可以通过ip访问  ==》 localhost会被解析成127.0.0.1，回环地址：主机自己发出去的包，直接被自己接收
        port:9000,
        open:true,
        compress:true, // 是否为静态文件开启gzip
        proxy:[
            {
                context:["/api"],
                target:"http://localhost:8080/",
                pathRewrite:{
                    "^/api":""
                },
                changeOrigin:true

            }
        ],
        historyApiFallback:true
    },
    plugins:[
       new HtmlWebpackPlugin({
           template:"./index.html"
       }),
        new VueLoaderPlugin()
    ]
}
